<script>
import { ref } from 'vue';
import img1 from "/src/assets/avatar.jpg";
import icon from "/src/assets/icon.png";
import MessBlank_1 from './components/MessBlank_1.vue';
import axios from 'axios';

export default {
  name: 'MainPage',
  components: { MessBlank_1 },
  data() {
    return {
      img1,
      icon,
      input: ref(''),
      messList: [], // 消息列表
      token: '',
      userID: '',
      PassageID:'',
      avatar:null,
    };
  },
  mounted() {
    const userData = JSON.parse(sessionStorage.getItem('token'));
    let userData1 = JSON.parse(sessionStorage.getItem('AdoptPassageID'));
    if(userData1==null)
      userData1=JSON.parse(sessionStorage.getItem('PassageID'));
      console.log("Adopt Passage ID:", userData1); // 打印 AdoptPassageID 中的数据
      this.token = userData.token;
      this.userID = userData.userID;
      axios.defaults.headers.common['Authorization'] = `${this.token}`;

    // 从后端获取消息数据
    const response_1 = axios.get('http://localhost:8080/users/'+this.userID);
      response_1.then((result) => {
          this.avatar = result.data.ProfilePhoto;
      }).catch((error) => {
          console.log(error);
      });
    axios
      .get('http://localhost:8080/messages/comment/'+ this.userID)
      .then((response) => {
        const data = response.data;
        console.log("评论返回的信息");
        console.log(response.data);
        // 解析后端返回的数据，动态生成 MessBlank_1 的绑定数据
        this.messList = data.map((item) => {
          const reply = item.Reply === "reply" ? item.Comment : item.Reply || item.Comment || '';
          return {
            MessageType:item.MessageType,
            PassageID: item.PassageID,
            PassageType:item.PassageType,
            CommentID:item.CommentID,
            userAvatar: item.UserInfo.ProfilePhoto || '/src/assets/avatar.jpg', // 如果没有头像，则使用默认头像
            userName: item.UserInfo.UName,
            messageTypeText: item.MessageType === "passage_comment" ? '文章' : '评论',
            showtitle: item.PassageTitle || '',
            reply: reply, 
          };
        });
      })
      .catch((error) => {
        console.error("Error fetching messages:", error);
      });
  },
  methods: {
    // 头像点击
    avaClick() {
      this.$router.push({ path: '/UserPage' });
    },
    discoverClick() {
      this.$router.push({ path: '/MainPage' });
    },
    adoptClick() {
      this.$router.push({ path: '/AdoptPage' });
    },
    msgClick() {},
    postClick() {
      this.$router.push({ path: '/PostPage' });
    },
    likeClick() {
      this.$router.push({ path: '/Message/like' });
    },
    applyClick() {
      this.$router.push({ path: '/Message/apply' });
    },
  }
};
</script>

<template>
  <div class="layout" style="height: 100vh;">
    <el-container>
      <el-header class="header">
        <el-row justify="space-between" style="padding-top: 10px; padding-bottom: 10px;">
          <img :src="icon" style="width: 55px; height: 55px;" alt="" />
          <el-avatar
            :class="'avatar'"
            :src="this.avatar"
            :fit="'cover'"
            :shape="'circle'"
            :size="55"
            @click="avaClick"
          />
        </el-row>
      </el-header>

      <el-container>
        <el-aside>
          <el-menu active-text-color="#FFD466" default-active="3">
            <el-menu-item class="aside" index="1" @click="discoverClick">
              <el-icon :size="25" style="margin-right: 10px;"><House /></el-icon>
              <span>发现</span>
            </el-menu-item>
            <el-menu-item class="aside" index="2" @click="adoptClick">
              <el-icon :size="25" style="margin-right: 10px;"><Star /></el-icon>
              <span>领养</span>
            </el-menu-item>
            <el-menu-item class="aside" index="3" @click="msgClick">
              <el-icon :size="25" style="margin-right: 10px;"><Message /></el-icon>
              <span>消息</span>
            </el-menu-item>
            <el-menu-item class="aside" index="4" @click="postClick">
              <el-icon :size="25" style="margin-right: 10px;"><CirclePlus /></el-icon>
              <span>发布</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-container>
          <el-header style="height: 40px;">
            <el-menu
              default-active="2"
              style="display: flex; justify-content: center; height: 40px;"
              active-text-color="#FFD466"
              mode="horizontal"
            >
              <el-menu-item class="chose" index="1" style="margin-right: 15px" @click="likeClick">赞</el-menu-item>
              <el-menu-item class="chose" index="2" style="margin-right: 15px">评论</el-menu-item>
              <el-menu-item class="chose" index="3" @click="applyClick">领养申请</el-menu-item>
            </el-menu>
          </el-header>

          <el-main class="mainPage">
            <el-row style="justify-content: start; margin-left: 10px; gap: 10px;">
              <MessBlank_1
                v-for="(item, index) in messList"
                :key="index"
                :userAvatar="item.userAvatar"
                :userName="item.userName"
                :messageTypeText="item.messageTypeText"
                :showtitle="item.showtitle"
                :reply="item.reply"
                :PassageID="item.PassageID"
                :PassageType="item.PassageType"
                :CommentID="item.CommentID"
              />
            </el-row>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>


<style scoped>
.el-menu{
  border:0!important;
}

.chose{
  font-size:18px;
  font-weight:bold;
}
::v-deep(.chose:hover){
  background-color: #FFE9B2!important;
  color:#FFD466!important;
}
.el-menu-item.is-active{
  background-color: white!important;
  color:#FFD466!important;
}

.el-avatar{
  cursor: pointer;
}
.el-menu{
  border:0!important;
}
/*header样式*/
.header{
  /*background-color:black;*/
  height:60px;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  margin-bottom:20px;
}


/*aside*/
.el-aside{
  margin-left: 10px;
  width:180px;
  height:calc(100vh - 70px);
  padding-top:23vh;
}

.aside{
  height:65px;
  font-size:18px;
  font-weight:bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep(.aside:hover){
  background-color: #FFE9B2;
}


/*主页面*/
.mainPage{
  height:50vh;
}

</style>


